<template>
  <view class="evaluate-container">
    <view class="evaluation-input-section">
      <view class="rating-section">
        <text class="rating-label">评分：</text>
        <view class="stars">
          <text
            v-for="(star, index) in 5"
            :key="index"
            class="star"
            :class="{ active: index < rating }"
            @click="setRating(index + 1)"
            >★</text
          >
        </view>
      </view>
      <view class="input-section">
        <textarea
          v-model="evaluationContent"
          class="evaluation-textarea"
          placeholder="请输入您的反馈内容..."
          :maxlength="500"
        />
        <view class="word-count">{{ evaluationContent.length }}/500</view>
      </view>
      <button class="submit-btn" @click="submitEvaluation">提交</button>
    </view>

    <view v-if="evaluationList.length > 0" class="evaluation-list">
      <view
        v-for="(item, index) in evaluationList"
        :key="index"
        class="evaluation-item"
        @click="goToReply(item)"
      >
        <view class="evaluation-content">
          <view class="evaluation-header">
            <text class="evaluation-title">{{ item.creator_name }}</text>
            <text class="evaluation-date">{{ item.create_time }}</text>
          </view>
          <text
            v-for="(star, index) in item.score"
            :key="index"
            style="color: #ffb800"
            >★</text
          >
          <view class="evaluation-body">
            <text class="evaluation-text">{{ item.evaluate_content }}</text>
          </view>
          <view class="evaluation-footer">
            <text
              class="evaluation-status"
              :class="
                item.reversion_content  ? 'status-done' : 'status-pending'
              "
            >
              {{ item.reversion_content? '已回复' : '未回复' }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view v-else class="empty-state">
      <image src="/static/image/msg.png" class="empty-image" />
      <text class="empty-text">暂无评价数据</text>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { submitData, getListData, EvaluationItem } from "@/api/evaluate";

const rating = ref(0);
const pohId = ref("");
const evaluationContent = ref("");
  
// 评价列表数据
const evaluationList = ref<EvaluationItem[]>([]);

// 加载评价列表
const loadEvaluationList = async () => {
  try {
    const res = await getListData({
      pob_id: pohId.value,
      limit: 1,
      size: 1000,
    });
    if (res.code === 0 && res.data && Array.isArray(res.data.Rows)) {
      evaluationList.value = res.data.Rows;
    } else {
      evaluationList.value = [];
    }
  } catch (error) {
    console.error("加载评价列表失败:", error);
    evaluationList.value = [];
  }
};

const goToReply = (item: any) => {
  uni.navigateTo({
    url: `/pages/reply/index?eData=${encodeURIComponent(JSON.stringify(item))}`,
  });
};

onLoad((options?: Record<string, string | undefined>) => {
  pohId.value = options?.poh_id || "";
  loadEvaluationList();
});

// 计算是否可以提交
const canSubmit = computed(() => {
  return rating.value > 0 && evaluationContent.value.trim().length > 0;
});

// 设置评分
const setRating = (value: number) => {
  rating.value = value;
};

// 提交评价
const submitEvaluation = () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: "请完成评分和评价内容",
      icon: "none",
    });
    return;
  }

  uni.showLoading({
    title: "提交中...",
  });

  submitData({
    pob_id: pohId.value,
    evaluate_content: evaluationContent.value,
    score: rating.value,
  })
    .then((res: any) => {
      if (res.success) {
        uni.showToast({
          title: "提交成功",
          icon: "success",
        });
        // 清空输入
        rating.value = 0;
        evaluationContent.value = "";

        // 刷新列表
        loadEvaluationList();
      }
    })
    .catch((error) => {
      console.error("提交评价失败:", error);
      uni.showToast({
        title: "提交失败",
        icon: "error",
      });
    })
    .finally(() => {
      uni.hideLoading();
    });
};
</script>

<style lang="scss">
.evaluate-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.evaluation-input-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .rating-section {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .rating-label {
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
    }

    .stars {
      display: flex;
      gap: 10rpx;

      .star {
        font-size: 40rpx;
        color: #ddd;
        cursor: pointer;

        &.active {
          color: #ffb800;
        }
      }
    }
  }

  .input-section {
    margin-bottom: 20rpx;

    .evaluation-textarea {
      width: 100%;
      height: 200rpx;
      font-size: 28rpx;
      line-height: 1.5;
      padding: 20rpx;
      box-sizing: border-box;
      border: 2rpx solid #eee;
      border-radius: 8rpx;
    }

    .word-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }

  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #2979ff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    border: none;

    &:disabled {
      background-color: #ccc;
    }
  }
}

.evaluation-list {
  .evaluation-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .evaluation-content {
      .evaluation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .evaluation-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .evaluation-date {
          font-size: 24rpx;
          color: #999;
        }
      }

      .evaluation-body {
        margin-top: 10px 0;

        .evaluation-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }

      .evaluation-footer {
        margin-top: 10rpx;
        display: flex;
        justify-content: flex-end;

        .evaluation-status {
          font-size: 24rpx;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;

          &.status-pending {
            color: #ff6f61;
            background-color: rgba(255, 111, 97, 0.1);
          }

          &.status-done {
            color: #4cd964;
            background-color: rgba(76, 217, 100, 0.1);
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 